
<!-- 查询报告 -->
<template>
    <div class="search">
        <van-nav-bar :border="false" title="二维码推广" />
        <!-- <img class="headImg" src="@/assets/reports/searchHeadImg.png" alt=""> -->
        <div class="cont">
            <div class="contHead">填写信息</div>
            <div class="desc1">*本平台不查个人央行征信，只提供多大数据风险检测，不参与其他贷款或助贷业务。</div>
            <!-- <div class="title">真实姓名</div> -->
            <div class="item marginBtm15">
                <van-field v-model="name" placeholder="请输入您的真实姓名" clearable>
                    <template #label>
                        <img class="FieldIcon" src="@/assets/reports/loginNicknameIcon.png" alt="">
                    </template>
                </van-field>
            </div>
            <!-- <div class="title">手机号</div> -->
            <div class="item marginBtm15">
                <van-field v-model="phone" type="tel" placeholder="请输入您的手机号" clearable>
                    <template #label>
                        <img class="FieldIcon" src="@/assets/reports/phoneIcon.png" alt="">
                    </template>
                </van-field>
            </div>
            <!-- <div class="title">验证码</div> -->
            <div class="codeWrap  marginBtm15">
                <div class="item">
                    <van-field v-model="authCode" maxlength="6" type="number" placeholder="请输入验证码" clearable>
                        <template #label>
                            <img class="FieldIcon" src="@/assets/reports/codeIcon.png" alt="">
                        </template>
                    </van-field>
                </div>
                <div class="codeWrapRight" @click="getCode">
                    {{num == 60 ? '验证码' : `${num}后获取`}}
                </div>
            </div>
            <!-- <div class="title">身份证号码</div> -->
            <div class="item marginBtm15">
                <van-field v-model="idNo" type="number" placeholder="请输入您的身份证号码" clearable>
                    <template #label>
                        <img class="FieldIcon" src="@/assets/reports/realnameIcon.png" alt="">
                    </template>
                </van-field>
            </div>
            <van-button class="submit" round color="#2184F8" block @click="submit">立即打赏检测</van-button>
            <van-button class="submit" plain hairline type="danger" color="#2184F8" round block @click="onClickRight">查询记录</van-button>
            <div class="pull">
                <div class="pullLeft">
                    <van-checkbox v-model="checked" icon-size="14px" checked-color="#2184F8" shape="square">我已阅读并同意<span style="color: #A76E0A;" @click.stop="goProtocolRge">《报告查询服务协议》</span><span style="color: #A76E0A;" @click.stop="goProtocolRge1">《授权书》</span></van-checkbox>
                </div>
            </div>
        </div>
        <div class="desc2">注：本报告不涉及金融场景的应用</div>

        <!-- 弹窗 -->
        <van-overlay :show="showDialog" z-index="998">
            <div class="dialogCont" >
                <div class="dialogContHead">特别提醒和免责声明</div>
                <div class="dislogMain">
                    <div>本平台作为大数据信息查询平台，业务范围仅有大数据报告查询服务（大数据报告并非人行征信报告）。报告仅提供给您本人了解自己的大数据情况，产生的报告不作为任何第三方下载，评估依据。同时本平台不参与任何贷款，助贷业务，请您注意甄别</div>
                    <div>1.切勿相信付费查询可以包下款</div>
                    <div>2.切勿相信付费查询可以优化征信，优化大数据。</div>
                    <div>3.切勿相信付费查询后可以多少个工作日内自动退还查询费用的。</div>
                    <div>同时本平台并未和任何贷款以及助贷机构进行合作，本报告仅提供参考以及了解自身大数据情况。查询获取的报告无法进行任何更改。</div>
                    <div class="flex dialogBtn">
                        <div></div>
                        <van-button type="primary" size="small" @click="submitOrder" round color="#D3A350">我知道了</van-button>
                    </div>
                </div>
            </div>
        </van-overlay>

        <!-- 选择支付宝或者微信 -->
        <van-popup round position="bottom" :style="{ height: '40%' }" v-model:show="showChannel">
            <div class="popHead">选择支付方式</div>
            <div class="channel flex">
                <div class="channelItem flex flexColumn allFlex alignCenter" @click="payOrder(1)">
                    <img src="@/assets/reports/aliIcon.png" alt="">
                    <div>支付宝</div>
                </div>
                <div class="channelItem flex flexColumn allFlex alignCenter" @click="payOrder(2)">
                    <img src="@/assets/reports/wechatIcon.png" alt="">
                    <div>微信</div>
                </div>
            </div>
        </van-popup>

        <div class="wechatBox" v-if="isWechat">
            <img src="@/assets/download/dynamicImg.gif" alt="">
            <div>
                <p>请点击左上角“…”在浏览器打开此页面。</p>
                <p>(备注：苹果手机用户请在Safari中打开此页面）</p>
            </div>
        </div>

        <!-- 客服 -->
        <div class="fixedService" @click="goLinke('在线客服')"></div>
    </div>
</template>

<script>
import { ref, reactive , getCurrentInstance , toRefs } from 'vue';
import { NavBar , Field , Checkbox , Button , Overlay , Popup } from 'vant';
import storage from 'store';
import { ACCESS_TOKEN , BRANDID } from '@/utils/types';
import { userAgent } from '@/utils/types';
import { getUserAgent , getDate } from '@/utils/index';
export default {
    components:{
        [NavBar.name]:NavBar,
        [Field.name]:Field,
        [Checkbox.name]:Checkbox,
        [Button.name]:Button,
        [Overlay.name]:Overlay,
        [Popup.name]:Popup,
    },
    setup() {
        storage.clearAll();
        const { proxy } = getCurrentInstance();
        const onClickRight = ()=>{
            // console.log('跳转记录页面');
            proxy.$router.push({name: 'reportBill'})
        };
        const downAddress = reactive({
            android: undefined,
            ios: undefined,
            userAgent: undefined,
        })
        const isWechat = ref(false)
        downAddress.userAgent = getUserAgent()
        console.log(downAddress.userAgent);
        console.log(userAgent.WECHAT)
        if(downAddress.userAgent == userAgent.WECHAT){
            isWechat.value = true
            return {
                userAgent,
                downAddress,
                isWechat,
            }
        }
        const name = ref('');  // 真实姓名
        const idNo = ref('');  // 身份证号码
        const phone = ref(''); // 手机号码
        const checked = ref(true); // 协议勾选状态
        const userPromotionId = proxy.getHashParam('userPromotionId') // 产品用户推广配置id
        const brandId = proxy.getHashParam('brandId')
        const orderCode = ref(''); // 提交查询后返回的订单号
        const showDialog = ref(false); // 是否展示弹框
        const showChannel = ref(false); // 选择支付通道
        const num = ref(60);
        const authCode = ref(''); // 验证码
        const getCodeLoading = ref(false);
        const timer = ref(null);

        // 获取系统的token
        function getToken(){
            proxy.$http.brandApi.getToken(brandId)
            .then(res=>{
                if(res.success){
                    storage.set(ACCESS_TOKEN,res[ACCESS_TOKEN], res.expires_in)
                }
            })
        }
        getToken()

        // 获取验证码
        function getCode () {
            console.log(phone.value)
            if(getCodeLoading.value == true){
                return;
            }
            if(phone.value == ''){
                proxy.$toast({position: 'bottom',message:'请输入手机号'})
                return
            }
            if(phone.value.length != 11){
                proxy.$toast({position: 'bottom',message:'请输入正确的手机号'})
                return
            }
            getCodeLoading.value = true
            num.value--;
            timer.value = setInterval(()=>{
                num.value--;
                console.log(num.value,'num')
                if(num.value == 0){
                    getCodeLoading.value = false
                    clearInterval(timer.value)
                    num.value = 60;
                }
            },1000)
            proxy.$http.loginApi.getCode(phone.value)
            .then(res=>{
                console.log(res,'res')
                if(res.success){
                    proxy.$toast({position: 'bottom',message:'验证码获取成功'})
                }else{
                    proxy.$toast({position: 'bottom',message:res.errMessage})
                }
            })
        }
        // 提交查询
        const submit = ()=>{
            if(name.value == ''){
                proxy.$toast({position: 'bottom',message:'请输入您的真实姓名'})
                return
            }
            if(idNo.value == ''){
                proxy.$toast({position: 'bottom',message:'请输入您的身份证号码'})
                return
            }
            if(idNo.value.length != 18){
                proxy.$toast({position: 'bottom',message:'请输入正确的身份证号码'})
                return
            }
            if(phone.value == ''){
                proxy.$toast({position: 'bottom',message:'请输入您的手机号'})
                return
            }
            if(phone.value.length != 11){
                proxy.$toast({position: 'bottom',message:'请输入正确的手机号'})
                return
            }
            if(authCode.value == ''){
                proxy.$toast({position: 'bottom',message:'请输入验证码'})
                return
            }
            showDialog.value = true
        }
        const submitOrder = () => {
            proxy.$http.brandApi.orderSubmit(userPromotionId, phone.value, name.value, idNo.value,authCode.value,{isNeedAuthCode: '1'})
            .then(res=>{
                console.log(res,'res')
                if(res.success){
                    orderCode.value = res.data.orderCode;
                    showDialog.value = false
                    showChannel.value = true
                }else{
                    proxy.$toast({position: 'bottom',message:res.errMessage})
                }
            })
        }
        // 产品订单支付
        const payOrder = (type) => {
            if(type == 1){
                proxy.$http.brandApi.orderPay(orderCode.value, type)
                .then(res=>{
                    console.log(res,'res')
                    if(type == 1){
                        // 支付宝支付
                        // const newTab = window.location();
                        // const div = document.createElement('div');
                        // div.innerHTML = res;
                        // newTab.document.body.appendChild(div);
                        // newTab.document.forms[0].submit();    
                        var odiv=document.createElement("div");
                        odiv.innerHTML=res;
                        document.body.appendChild(odiv);
                        document.forms[0].submit()
                    }else{

                    }
                })
            }else{
                proxy.$toast({position: 'bottom',message:'敬请期待'})
            }
        }

        // 跳转用户使用协议
        const goProtocolRge = () => {
            proxy.$router.push({name: 'searchAgr'})
        }
        // 跳转用户授权书
        const goProtocolRge1 = () => {
            if(name.value == ''){
                proxy.$toast({position: 'bottom',message:'请输入您的真实姓名'})
                return
            }
            if(idNo.value == ''){
                proxy.$toast({position: 'bottom',message:'请输入您的身份证号码'})
                return
            }
            if(idNo.value.length != 18){
                proxy.$toast({position: 'bottom',message:'请输入正确的身份证号码'})
                return
            }
            var date = getDate();
            console.log(date)
            proxy.$router.push({name: 'authorization',query: {'name': name.value,'idNo': idNo.value, 'date': date}});
            // window.location.href = `https://szk.lexiangaysh.cn/szkLink/#/authorization?name=${name.value}&idNo=${idNo.value}`;
        }

        // 跳转在线客服
        const goLinke = (title) => {
            proxy.$http.brandApi.queryAppInforMtion({infoType:2,title: '在线客服',})
            .then(res=>{
                console.log(res,'res')
                if(res.success){
                    if(res.data.content.length > 0){
                        window.location.href = res.data.content[0].jumpUrl;
                    }else{
                        proxy.$toast({position: 'bottom',message:'暂未获取到在线客服链接！'})
                    }
                }else{
                    proxy.$toast({position: 'bottom',message:res.errMessage})
                }
            })
        }
        return {
            onClickRight,
            name,
            idNo,
            phone,
            checked,
            submit,
            goProtocolRge,
            showDialog,
            submitOrder,
            showChannel,
            payOrder,
            isWechat,
            goProtocolRge1,
            num,
            authCode,
            getCode,
            getCodeLoading,
            goLinke,
        }
    }
}

</script>
<style scoped>
.search{
    background-image: url('../../assets/reports/searchBg.png');
    background-color: rgba(33, 132, 248, 1);
    background-repeat: no-repeat;
    background-size: 100%;
    min-height: 100vh;
}
.search /deep/ .van-nav-bar__content,.search /deep/ .van-nav-bar{
    background: rgba(0, 0, 0, 0);
}
.search /deep/ .van-badge__wrapper{
    color: #FFFFFF;
}
.search /deep/ .van-nav-bar__title{
    color: #FFFFFF;
}
.search /deep/ .van-nav-bar__text{
    color: #FFFFFF;
}
.headImg{
    width: 100%;
}

.cont{
    margin: 200px 12px 15px 12px ;
    padding: 16px 15px;
    background: #FFFFFF;
    border-radius: 15px;
    position: relative;
    z-index: 99;
}
.desc1{
    color: #AB5A01;
    font-size: 13px;
    /* text-indent: 20px; */
    /* font-style: italic; */
    margin-bottom: 10px;
}
.contHead{
    background: url('../../assets/reports/contHeadBg.png') no-repeat;
    background-size: 100%,100%;
    margin: -27.5px auto 0;
    width: 221px;
    height: 50px;
    text-align: center;
    padding-top: 7px;
    box-sizing: border-box;
    color: #AB5A01;
    font-size: 20px;
    font-weight: bold;
}
.title{
    font-size: 12px;
    color: #808080;
    font-weight: 400;
    margin-bottom: 7.5px;
    /* text-shadow: 3px 4px 3px rgba(255, 212, 0 ,.5); */
}
.codeWrap{
    display: flex;
}
.item{
    flex: 1;
    /* width: 100%; */
    height: 45px;
    /* border-bottom: .5px solid #E0E0E0; */
    border-radius: 25px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    /* border: 1px solid #E6E6E6; */
    background: #F2F9FF;
    margin-bottom: 15px;
    /* padding-top: 13px; */
}
.item >>> .van-field{
    flex: 1;
    padding-left: 10px;
    max-height: 40px;
    background: none;
}
.item >>> .van-field__label{
    width: 18px;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.itemRight{
    width: 245px;
    margin-left: 20px;
    padding-top: 20px;
}
.codeWrapRight{
    /* width: 245px; */
    margin-left: 20px;
    padding-top: 10px;
    color: #2184F8;
}
.FieldIcon{
    width: 18px;
    height: 18px;
    display: block;
}

.pull{
    margin-bottom: 20px;
    /* text-align: center; */
    color: #B7B6B6;
    margin-top: 15px;
    font-size: 12px;
}
.submit{
    margin-bottom: 17px;
    /* margin-top: 10px; */
    border-radius: 37px;
}

.desc2{
    font-size: 12px;
    text-align: center;
    color: #FFFFFF;
}

/* 弹窗 */
.dialogCont{
    margin-top: 134px;
    /* bottom: 123px; */
    margin-left: 51px;
    margin-right: 51px;
    background: #FFFFFF;
    border-radius: 15px;
    /* max-height: 462px;
    overflow: auto; */
}
.dialogContHead{
    height: 43px;
    line-height: 43px;
    background: #E0E1E2;
    border-radius: 20px 20px 0 0;
    padding-left: 15.5px;
    font-size: 14px;
}
.dislogMain{
    padding: 15px 18px;
    font-size: 13px;
    line-height: 25px;
}
.dialogBtn{
    width: 100%;
    justify-content: space-between;
}

/* 支付方式 */
.popHead{
    height: 43px;
    line-height: 43px;
    background: #E0E1E2;
    border-radius: 20px 20px 0 0;
    font-size: 14px;
    text-align: center;
}
.channel{
    margin-top: 50px;
    padding: 0 30px;
}

.wechatBox{
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.8);
    color: #FFFFFF;
    z-index: 999;
}
.wechatBox>div{
    text-indent: 30px;
    line-height: 20px;
    font-size: 14px;
}

.fixedService{
    position: fixed;
    bottom: 65px;
    right: 8px;
    width: 61px;
    height: 68px;
    background: url('../../assets/reports/kefuIcon.png') no-repeat;
    background-size: 100%;
    z-index: 999;
}
</style>